<template>
  <div>
    <div>
      <a-modal
        :title="title"
        :width="500"
        :visible="visible"
        :confirmLoading="loading"
        style="text-align:center;font-weight:800"
        @ok="() => { $emit('ok',this.queryParam) }"
        @cancel="() => { $emit('cancel',$refs.form) }"
      >
        <!-- <h3 slot="title" style="font-weight:800">添加技术</h3> -->
        <a-spin :spinning="loading">
          <a-form-model ref="form" :model="queryParam" :rules="rules">
            <a-row :gutter="24" style="text-align:center">
              <a-col :md="6" :sm="6"></a-col>
              <a-col :md="12" :sm="12">
                <a-form-model-item
                  label="新技术名称"
                  :labelCol="{lg: {span: 10}, sm: {span:7}}"
                  :wrapperCol="{lg: {span: 24}, sm: {span: 17} }"
                  prop="technicalName"
                >
                  <BaseInput v-model.trim="queryParam.technicalName" />
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="6"></a-col>
            </a-row>
            <a-row :gutter="24" style="text-align:center">
              <a-col :md="6" :sm="6"></a-col>
              <a-col :md="12" :sm="12">
                <a-form-model-item
                  label="实物量单位"
                  :labelCol="{lg: {span: 10}, sm: {span:7}}"
                  :wrapperCol="{lg: {span: 24}, sm: {span: 17} }"
                  prop="entityMeasureUnit"
                >
                  <BaseInput v-model.trim="queryParam.entityMeasureUnit" />
                </a-form-model-item>
              </a-col>
              <a-col :md="6" :sm="6"></a-col>
            </a-row>
          </a-form-model>
        </a-spin>
      </a-modal>
    </div>
<!--    <div v-if="posttype===1">-->
<!--      <a-modal-->
<!--        title="修改技术"-->
<!--        :width="500"-->
<!--        :visible="visible"-->
<!--        :confirmLoading="loading"-->
<!--        style="text-align:center;font-weight:800"-->
<!--        @ok="() => { $emit('ok',this.queryParam) }"-->
<!--        @cancel="() => { $emit('cancel') }"-->
<!--      >-->
<!--        &lt;!&ndash; <h3 slot="title" style="font-weight:800">修改{{ queryParam.technicalName}}技术</h3> &ndash;&gt;-->
<!--        <a-spin :spinning="loading">-->
<!--          <a-form-model ref="form" :model="queryParam" :rules="rules">-->
<!--            <a-row :gutter="24">-->
<!--              <a-col :md="6" :sm="6"></a-col>-->
<!--              <a-col :md="12" :sm="12">-->
<!--                <a-form-model-item-->
<!--                  label="应用工程量"-->
<!--                  :labelCol="{lg: {span: 10}, sm: {span:7}}"-->
<!--                  :wrapperCol="{lg: {span: 14}, sm: {span: 17} }"-->
<!--                  prop="applicationProjectMeasure"-->
<!--                >-->
<!--                  <BaseInput v-model="queryParam.applicationProjectMeasure"></BaseInput>-->
<!--                </a-form-model-item>-->
<!--              </a-col>-->
<!--              <a-col :md="6" :sm="6"></a-col>-->
<!--            </a-row>-->
<!--            <a-row :gutter="24">-->
<!--              <a-col :md="6" :sm="6"></a-col>-->
<!--              <a-col :md="12" :sm="12">-->
<!--                <a-form-model-item-->
<!--                  label="实物量"-->
<!--                  :labelCol="{lg: {span: 9}, sm: {span:7}}"-->
<!--                  :wrapperCol="{lg: {span: 15}, sm: {span: 17} }"-->
<!--                  prop="entityMeasure"-->
<!--                >-->
<!--                  <BaseInput v-model="queryParam.entityMeasure"></BaseInput>-->
<!--                </a-form-model-item>-->
<!--              </a-col>-->
<!--              <a-col :md="6" :sm="6"></a-col>-->
<!--            </a-row>-->
<!--            <a-row :gutter="24">-->
<!--              <a-col :md="6" :sm="6"></a-col>-->
<!--              <a-col :md="12" :sm="12">-->
<!--                <a-form-model-item-->
<!--                  label="投入经费"-->
<!--                  :labelCol="{lg: {span: 9}, sm: {span:7}}"-->
<!--                  :wrapperCol="{lg: {span: 15}, sm: {span: 17} }"-->
<!--                  prop="investmentOutlay"-->
<!--                >-->
<!--                  <BaseInput v-model="queryParam.investmentOutlay"></BaseInput>-->
<!--                </a-form-model-item>-->
<!--              </a-col>-->
<!--              <a-col :md="6" :sm="6"></a-col>-->
<!--            </a-row>-->
<!--            <a-row :gutter="24">-->
<!--              <a-col :md="6" :sm="6"></a-col>-->
<!--              <a-col :md="12" :sm="12">-->
<!--                <a-form-model-item-->
<!--                  label="产生效益"-->
<!--                  :labelCol="{lg: {span: 9}, sm: {span:7}}"-->
<!--                  :wrapperCol="{lg: {span: 15}, sm: {span: 17} }"-->
<!--                  prop="productionBenefit"-->
<!--                >-->
<!--                  <BaseInput v-model="queryParam.productionBenefit"></BaseInput>-->
<!--                </a-form-model-item>-->
<!--              </a-col>-->
<!--              <a-col :md="6" :sm="6"></a-col>-->
<!--            </a-row>-->
<!--            <a-row :gutter="24">-->
<!--              <a-col :md="6" :sm="6"></a-col>-->
<!--              <a-col :md="12" :sm="12">-->
<!--                <a-form-model-item-->
<!--                  label="上传附件"-->
<!--                  :labelCol="{lg: {span: 9}, sm: {span:7}}"-->
<!--                  :wrapperCol="{lg: {span: 8}, sm: {span: 7} }"-->
<!--                >-->
<!--                  <div :key="Math.random()">-->
<!--                    <a-upload-->
<!--                      name="file"-->
<!--                      :multiple="true"-->
<!--                      method="post"-->
<!--                      action="http://192.168.128.52:3000/mock/11/annex"-->
<!--                      @change="handleChange"-->
<!--                    >-->
<!--                      <a-button style="border-radius:25px">-->
<!--                        <a-icon type="upload" />上传附件-->
<!--                      </a-button>-->
<!--                    </a-upload>-->
<!--                  </div>-->
<!--                </a-form-model-item>-->
<!--              </a-col>-->
<!--              <a-col :md="6" :sm="6"></a-col>-->
<!--            </a-row>-->
<!--          </a-form-model>-->
<!--        </a-spin>-->
<!--      </a-modal>-->
<!--    </div>-->
  </div>
</template>

<script>
const rules = {
  technicalName: [{ required: true, message: '请填写新技术名称', trigger: 'change' }],
  entityMeasureUnit: [{ required: true, message: '请填写实物量单位', trigger: 'change' }],
  applicationProjectMeasure: [{ required: true, message: '请填写应用工程量', trigger: 'change' }],
  entityMeasure: [{ required: true, message: '请填写实物量', trigger: 'change' }],
  investmentOutlay: [{ required: true, message: '请填写投入经费', trigger: 'change' }],
  productionBenefit: [{ required: true, message: '请填写产生的效益', trigger: 'change' }],
  entityMeasureUnitCompany: [{ required: true, message: '请填写实物量单位', trigger: 'change' }]
}
export default {
  name:'a'+ Date.now(),
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => {}
    },
    posttype: {
      type: Number,
      default: () => 0
    },
    title: {
      type: String,
      default: () => undefined
    }
  },
  data() {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      }
    }
    return {
      queryParam: {
        technicalName:undefined,
        entityMeasureUnit:undefined
      },
      rules: rules
    }
  },
  watch:{
    // model(){
    //   this.queryParam.technicalName = this.$props.model.technicalName
    //   this.queryParam.entityMeasureUnit = this.$props.model.entityMeasureUnit
    // }
  },
  methods: {
    handleChange(info) {
      if (info.file.status !== 'uploading') {
        this.queryParam.planAttachments = info.fileList
      }
      if (info.file.status === 'done') {
        this.$message.success(`${info.file.name} file uploaded successfully`)
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`)
      }
    }
  }
}
</script>

<style lang='less'  scoped>
</style>
